<template>
  <div>
    <div class="f-r a-c j-b" style="margin-bottom: 20px">
      <span>工序列表</span>
      <el-button type="primary" plain icon="el-icon-plus" :disabled="!teamId" @click="onAdd">添加工序</el-button>
    </div>
    <div class="table-box">
      <el-table
        v-loading="loading"
        :height="300"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="index" align="center" label="序号" />
        <el-table-column prop="processInfoName" label="工序名称" align="center" />
        <el-table-column prop="cropId" label="适用作物" align="center" />
        <el-table-column prop="rank" label="工序顺序" align="center" />
        <el-table-column label="操作" fixed="right" width="80px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="onDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>

    <el-dialog
      title="新增/编辑工序"
      :visible.sync="dialogVisible"
      append-to-body
      width="463px"
    >
      <el-form ref="formRef" label-position="top" :model="ruleForm" :rules="rules">
        <el-form-item label="工序名称" prop="processInfoName">
          <el-input v-model="ruleForm.processInfoName" clearable />
        </el-form-item>
        <el-form-item label="工序顺序" prop="rank">
          <el-input v-model="ruleForm.rank" clearable type="number" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import crud from '@/mixins/crud';
import { http_process } from '@/api'
export default {
  name: 'Item',
  mixins: [crud],
  data() {
    return {
      request: http_process,
      dialogVisible: false,
      teamId: null,
      ruleForm: {
        id: undefined,
        processInfoName: '',
        rank: ''
      }
    }
  },
  methods: {
    initData(teamId) {
      this.teamId = teamId
      if (!teamId) {
        this.tableData = []
        return
      }
      this.loading = true
      http_process.page({
        ...this.getQueryParams(),
        teamId
      }).then(res => {
        this.tableData = res.data.list
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    onAdd() {
      this.ruleForm = {
        id: undefined,
        processInfoName: '',
        rank: '',
        teamId: this.teamId
      }
      this.dialogVisible = true
    },
    onSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.request[this.ruleForm.id ? 'update' : 'create']({
            ...this.ruleForm
          }).then(res => {
            this.$message.success(res.msg)
            this.initData(this.teamId)
            this.dialogVisible = false
          })
        }
      })
    },
    onDelete(row) {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.request.deleteOne(row[this.deleteKey]).then(res => {
            this.$message.success(res.msg)
            this.initData(this.teamId)
          })
        })
        .catch(() => {

        })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
